<cfmodule template="../../tag/layout.cfm" bodyIsEasyUILayout="false">

<!-- 添加、修改字段表单内容 -->
<div id="dlg" class="easyui-dialog" title="字段信息" style="width:500px;height:380px;padding:10px"
data-options="
	closed:true,
    iconCls: 'icon-save',
    buttons: [{
        text:'确认',
        handler:function(){
        	EditFields();
        }
    },{
        text:'取消',
        handler:function(){
        	$('#dlg').dialog('close');
        }
    }]
">
<!-- 通过hidden域editMode值来区别是添加还是修改操作 -->
<input type="hidden" name="editMode" id="editMode" value="-1" />
<table class="table" width="100%">
  <tbody>
  	 <tr>
      <th>字段类型</th>
      <td>
      	<select id="ftype" name="ftype" class="easyui-combobox" data-options="panelHeight:'auto'" style="width:120px;">
      		<option value="">请选字段类型</option>
      		<option value="1">文本框</option>
      		<option value="2">编辑框</option>
      		<option value="3">下拉框</option>
      		<option value="4">复选框</option>
      		<option value="5">选择文件</option>
      		<option value="6">选择日期</option>
      		<option value="7">富文本框</option>
      	</select>
      </td>
    </tr>
    <tr>
    	<th>是否必选</th>
    	<td><input type="checkbox" name="frequire" id="frequire" value="0"/></td>
    <tr>
      <th>验证类型</th>
      <td>
      	<select id="fchecktype" name="fchecktype" class="easyui-combobox" data-options="panelHeight:'auto'" style="width:170px;">
      		<option value="0">请选验证类型(默认不验证)</option>
      		<option value="1">整数类型</option>
      		<option value="2">邮箱类型</option>
      		<option value="3">网址类型</option>
      		<option value="4">电话类型</option>
      		<option value="5">手机类型</option>
      		<option value="6">电话手机</option>
      		<option value="7">邮编类型</option>
      		<option value="8">货币类型</option>
      		<option value="9">英文类型</option>
      		<option value="10">中文类型</option>
      		<option value="11">QQ号码</option>
      	</select>
      </td>
    </tr>
    
    <tr>
      <th>字段名称</th>
      <td>
      <input type="text" id="ename" name="ename"> (3-12个字母字串)
      </td>
   </tr>
   <tr>
      <th>字段说明</th>
      <td><input type="text" id="cname" name="cname" /></td>
    </tr>
    <th>字段数据</th>
      <td>
      	<textarea cols="50" rows="5" id="fvalue" name="fvalue" disabled="disabled" style="background:#f5f5f5;"></textarea><br/>(每行为一个选择项)
      </td>
  </tbody>
</table>
</div>
  
<fieldset>
<legend>扩展字段清单</legend>
<table class="table" id="formDesignTable" width="100%">
  <tbody id="formdesign"></tbody>
</table>
</fieldset>
  
<div style="text-align:right; margin:10px;">
	<a href="#" class="easyui-linkbutton" id="fieldEdit" data-options="iconCls:'icon-add'">添加字段</a>
</div>
  
</cfmodule>

<cfscript>
	if( structKeyExists(rc, "id")  && rc.id > 0 ){
		id = rc.id;
	}else{
		id = 0;
	}
	
	if( structKeyExists(rc, "categorytypeid")  && rc.categorytypeid > 0 ){
		categorytypeid = rc.categorytypeid;
	}else{
		categorytypeid = 0;
	}
</cfscript>
<script type="text/javascript">
	
	var closeDialog = function($dialog) {
		$dialog.dialog('destroy');
	}
	
	var submitNow = function($dialog, $grid, $pjq) {
		//对formDesignTable的tr内容进行遍历操作，并将tr中的value属性值转化为数组内容
		var fieldString = new Array();
		$("#formDesignTable tr").each(function() {
		  fieldString.push($(this).attr('value'));
		});
		
		//将字段数组转成字符串，并提交到后台进行formobjectlist字段的更新，关闭窗口
		var url="?action=category.update&id=<cfoutput>#id#</cfoutput>";
		$.post(url, {"formobjectlist":fieldString.toString()},
		   function(data){
		     $dialog.dialog('destroy');
		});
	};
	
	var submitForm = function($dialog, $grid, $pjq) {
		submitNow($dialog, $grid, $pjq);
	};
	
	//是否为英文名称，长度3-12字母长度
	function isFieldEName(s) {
		var patrn=/^[a-zA-Z]{3,12}$/;
		if (!patrn.exec(s)) {
			return false;
		}
		return true;
	}
	
	//添加、修改字段操作
	function EditFields(){
		//类型下拉框必须有值
		if( $('#ftype').combobox('getValue').trim().length != 0 ){
			//ename判断
			if (isFieldEName( $("#ename").val().trim()) == false) {
				$.messager.alert('信息提示','字段名称只能输入3-12个字母字串!');
				return false;
			}
			
			//cname判断
			if ($("#cname").val().trim().length == 0) {
				$.messager.alert('信息提示','字段说明不可为空!');
				return false;
			}
			
			//将表单数据转化为数组，并更改其分隔符号为:号
			fields =  new Array();
			fields[0] = $("#ename").val().trim();
			fields[1] = $("#cname").val().trim();
			if($("#frequire").prop("checked")){
				fields[2] = 1;
			}else{
				fields[2] = 0;
			}		
			fields[3] = $("#fchecktype").combobox('getValue').trim();
			fields[4] = $('#ftype').combobox('getValue').trim();
			fields = fields.join(":");
			
			//在下拉及复选条件下，获取其值，并转化分隔符号为|
			if($('#ftype').combobox('getValue') == 3 || $('#ftype').combobox('getValue') == 4){
			 	fvalue = $('#fvalue').val().split('\n');
			 	fvalue = fvalue.join("|");
			 	fields = fields +"+"+fvalue;
			}
			o = $("#formdesign");
			
			//将表单数据转化为数组内容，并调用getHtml函数
			html=getHtml(fields.split(','));
			
			if( $("#editMode").val() == -1){
				//新增字段模式
				o.append(html);
			}else{
				//修改字段模式
				$('#formdesign tr').eq($("#editMode").val()).replaceWith(html);
			}
			
			$("#dlg").dialog("close");
			
			//清空表单
			$("#ftype").combobox('setValue','');
			$("#fchecktype").combobox('setValue',0);
			$("#ename").val('');
			$("#cname").val('');
			$("#frequire").val(0);
			$("#frequire").prop("checked",false);
			$("#fvalue").val('');
			$("#editMode").val(-1);
			
			//按钮操作部分的绑定操作
			btnOperates();
		}else{
			$.messager.alert('信息提示','请选字段类型!');
		}
	}
	
	function btnOperates(){
		//在html方法调用以后，元素的事件绑定操作需要在后面进行，也就是说以下代码必须放置在该位置
		$(".up_btn").on("click",function(){
			$(this).closest('tr').insertBefore($(this).closest('tr').prev());
		});
		
		$('.down_btn').on("click",function(){
			$(this).closest('tr').insertAfter($(this).closest('tr').next());
		})
		
		$('.edit_btn').on("click",function(){
			//获取当前tr的index索引位置
			$("#editMode").val($(this).closest('tr').index());
			
			arrSingleField = $(this).closest('tr').attr('value').split(':');
			//英文字段名称
			eName = arrSingleField[0];
			//中文字段说明
			cName = arrSingleField[1];
			//是否必选
			fRequire = arrSingleField[2];
			//验证类型
			fCheckType = arrSingleField[3];
			//字段类型，数字型
			fType = parseInt(arrSingleField[4].split('+')[0]);
			//字段的值
			fValue = arrSingleField[4].split('+')[1];
			
			//编辑模式时进行表单赋值操作
			$('#ftype').combobox('setValue',fType);
			$('#fchecktype').combobox('setValue',fCheckType);
			if(fRequire == 1){
				$("#frequire").prop("checked",true);
			}else{
				$("#frequire").prop("checked",false);
			}
			$("#ename").val(eName);
			$("#cname").val(cName);
			if(fType == 3 || fType == 4){
				$("#fvalue").val(fValue.split('|').join('\n'));
			}else{
				$("#fvalue").val(fValue);
			}
			
			$("#dlg").dialog("open");
		})
		
		$('.delete_btn').on("click",function(){
			trObj = $(this).closest('tr');
		  	$.messager.confirm('询问', '您确定要删除此记录？',
		    function(r) {
		        if (r) {
		        	trObj.remove();
		        }
		    });
		})
	}
	
	
	function getHtml(arrFields){
		html="";
			for( var i = 0;i<arrFields.length;i++ ){
				//单个字段
				arrSingleField = arrFields[i].split(':');
				//英文字段名称
				eName = arrSingleField[0];
				//中文字段说明
				cName = arrSingleField[1];
				//是否必选
				fRequire = arrSingleField[2];
				if(fRequire == 1){
					fRequireString = "<span style='color:red'>*</span>"; 
				}else{
					fRequireString = ""; 
				}
				//验证类型
				fCheckType = arrSingleField[3];
				arrCheckType = new Array('没有类型','整数类型','邮箱类型','网址类型','电话类型','手机类型','电话手机','邮编类型','货币类型','英文类型','中文类型','QQ号码');
				
				fCheckString =  arrCheckType[fCheckType]+fRequireString;
				//字段类型，数字型
				fType = parseInt(arrSingleField[4].split('+')[0]);
				//字段的值
				fValue = arrSingleField[4].split('+')[1];
				
				operateHtml = "<td width='80'>";
				operateHtml += " <img class='iconImg ext-icon-arrow_down down_btn' title='下移'/>";
				operateHtml += " <img class='iconImg ext-icon-arrow_up up_btn' title='上移' />"; 
				operateHtml += " <img class='iconImg ext-icon-application_edit edit_btn' title='修改' />";
				operateHtml += " <img class='iconImg ext-icon-application_delete delete_btn' title='删除' />";
				operateHtml += "</td>";
				
				html += "<tr value=" + arrFields[i] + ">";
				switch(fType)
				{
				case 1://文本框
					html += fw.formatString("<th>{1}</th><td><input type='text' name='{0}' size='40' value='文本框'> {3}</td>{2}",eName,cName,operateHtml,fCheckString);
				  break;
				case 2://编辑框
					html += fw.formatString("<th>{1}</th><td><textarea name='{0}'>编辑框</textarea> {3}</td>{2}",eName,cName,operateHtml,fCheckString);
				  break;
				case 3://下拉框
					optionHtml = "";
					$.each(fValue.split('|'), function(){     
					    optionHtml += fw.formatString("<option>{0}</option>", this.trim());
					});  
					html += fw.formatString("<th>{1}</th><td><select name='{0}'>{2}</select>{4}</td> {3}",eName,cName,optionHtml,operateHtml,fCheckString);
				  break;
				case 4://复选框
					checkboxHtml = "";
					$.each(fValue.split('|'), function(){     
					    checkboxHtml += fw.formatString("<input type='checkbox' name='{0}'> {1}",eName,this.trim());
					});  
					html += fw.formatString("<th>{0}</th><td>{1} {3}</td>{2}",cName,checkboxHtml,operateHtml,fCheckString);
				  break;
				case 5://选择文件
					html += fw.formatString("<th>{1}</th><td><input type='text' name='{0}' size='40' value='选择文件'> <img class='iconImg ext-icon-attach'> {3}</td>{2}",eName,cName,operateHtml,fCheckString);
				  break; 
				case 6://选择日期
					html += fw.formatString("<th>{1}</th><td><input type='text' name='{0}' size='40' value='选择日期'> <img class='iconImg ext-icon-note_delete'> {3}</td>{2}",eName,cName,operateHtml,fCheckString);
				  break; 
				case 7://富文本框
					html += fw.formatString("<th>{1}</th><td><textarea name='{0}'>富文本框</textarea> {3}</td>{2}",eName,cName,operateHtml,fCheckString);
				  break;
				default:
				
				}
				html +="</tr>";
				
			}
			
		return html;	
			
	}
	
	$(function(){
		//类型下拉操作的绑定，在onchange时改变textarea的disabled及background的样式
		$("#ftype").combobox({  
	         onChange:function(){  
	            if($('#ftype').combobox('getValue') == 3 || $('#ftype').combobox('getValue') == 4){
	            	$("#fvalue").prop("disabled", false).css("background","white");
	            }else{
	            	$("#fvalue").prop("disabled", true).css("background","#f5f5f5");
	            	$("#fvalue").val('');
	            }
	         }  
	     })
		
		//调用添加操作
		$('#fieldEdit').on("click",function(){
			$('#dlg').dialog('open');
			$('#ftype').combobox('setValue','');
		})
		
		//加载数据，初始进度条
		parent.$.messager.progress({
			text : '数据加载中....'
		});
		
		$.ajax({
		    type: "POST",
		    url: "?action=category.get",
		    data: {
		        id:<cfoutput>#id#</cfoutput>
		    }
		}).done(function(result) {
			
			//如果formobjectlist字段有值时才做扩展字段列表处理
			//如果数据库表内blob中是null值，那么需要判断undefined，如果进行了更新操作，但blob里又是无数据，那么就成了空值，所以得判断字符串的长度是否为空
			if(typeof(result.formobjectlist) != "undefined" && result.formobjectlist.trim().length!=0){
				//将formobjectlist转化为数组
				aFields = result.formobjectlist.split(',');
				o = $("#formdesign");
				html = getHtml(aFields);
				o.html(html);
			}
			
			btnOperates();
			
			parent.$.messager.progress('close');
		}, 'json');
	})
</script>	 
